<template>
    <div class="register">
        <van-form @submit="onSubmit" :show-error-message="false">
            <van-field name="用户名">
                <template #input>
                    <div class="input_icon"><img src="~assets/images/username.png" alt="用户名"></div>
                    <van-field
                    v-model="username"
                    type="username"
                    placeholder="请输入用户名"
                    clearable
                    :rules="[{ required: true, trigger: 'onBlur', message: '请输入用户名' }]"
                    />
                </template>
            </van-field>

            <van-field name="密码">
                <template #input>
                    <div class="input_icon"><img src="~assets/images/password.png" alt="密码"></div>
                    <van-field
                    v-model="password"
                    type="password"
                    placeholder="请输入密码"
                    clearable
                    :rules="[{ required: true, trigger: 'onBlur', message: '请输入密码' }]"
                    />
                </template>
            </van-field>

            <van-field name="手机号">
                <template #input>
                    <div class="input_icon"><img src="~assets/images/tel.png" alt="手机号"></div>
                    <div class="input_choose">
                        <van-field
                        readonly
                        clickable
                        name="picker"
                        :value="chooseValue"
                        @click="showPicker = true"
                        />
                        <van-popup v-model="showPicker" position="bottom">
                            <van-picker
                                show-toolbar
                                :columns="columns"
                                @confirm="onConfirm"
                                @cancel="showPicker = false"
                            />
                        </van-popup>
                    </div>
                    <van-field
                    v-model="tel"
                    type="tel"
                    placeholder="请输入手机号"
                    clearable
                    :rules="[{ required: true, trigger: 'onBlur', message: '请输入手机号' }]"
                    />
                </template>
            </van-field>

            <van-field name="验证码" class="sms">
                <template #input>
                    <div class="input_icon"><img src="~assets/images/sms.png" alt="验证码"></div>
                    <van-field
                    v-model="sms"
                    placeholder="请输入验证码"
                    clearable
                    :rules="[{ required: true, trigger: 'onBlur', message: '请输入验证码' }]"
                    >
                        <template #button>
                            <!-- <van-button size="small" type="info" plain hairline @click="getSms">获取验证码</van-button> -->
                            <div class="icon">
                                <van-image
                                ref="smsImg"
                                width="76"
                                height="30"
                                fit="cover"
                                :src="smsSrc"
                                @click="getSms"
                                />
                            </div>
                        </template>
                    </van-field>
                </template>
            </van-field>

            <div class="submit">
                <van-button round block type="info" native-type="submit" :disabled="disabled">注册</van-button>
            </div>
        </van-form>

        <div class="register_bottom">
            <van-checkbox v-model="checked" shape="square" icon-size="16px">阅读并同意<span>《Share云盘用户协议》</span>和<span>《Share云盘隐私权保护声明》</span></van-checkbox>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Register',
    data(){
        return {
            username: '',
            password: '',
            tel: '',
            sms: '',
            chooseValue: '+86',
            columns: ['+86', '+852', '+853', '+886'],
            showPicker: false,
            checked: false,

            smsSrc: '',
            disabled: true
        }
    },
    created(){
        this.getSms()
        // this.getSchoolName()
    },
    methods: {
        // 提交注册
        onSubmit(){
            if(this.checked){
                this.$request({
                    method: 'post',
                    url: '/api/Auth/Register',
                    params: {
                        userName: this.username,
                        phone: this.tel,
                        pwd: this.password,
                        key: 'key',
                        securityCode: this.sms,
                        roleCode: 3,
                        PositionName: '',
                        SchoolName: '',
                        HandUrl: ''
                    }
                }).then(({data}) => {
                    if(data.code == 1){
                        sessionStorage.setItem('mobileToken', data.data.token)
                        // 储存登录的用户名， 用于我的页面显示用户信息
                        sessionStorage.setItem('shareUserName', data.data.userName)
                        this.$router.push('/Home')
                        this.$notify({type: 'success', message: '注册成功!'});
                    }else{
                        this.$notify(data.msg);
                    }
                })
            }
        },
        // 手机区号选择
        onConfirm(value){
            this.chooseValue = value;
            this.showPicker = false;
        },
        // 获取验证码
        getSms(){
            this.$request({
                url: '/api/Auth/VerifiCode',
                params: {
                    key: 'key'
                },
                responseType: 'blob'
            }).then(res => {
                // console.log(res)
                let img = document.createElement('img')
                const myBlob = new window.Blob([res.data], {type: 'image/jpeg'})
                const qrUrl = window.URL.createObjectURL(myBlob)
                this.smsSrc = qrUrl
            })
        },
        // 获取配置参数
        getSchoolName(){
            this.$request({
                url: '/api/General/GetDictionaryDatas'
            }).then(res => {

            })
        }
    },
    watch: {
        checked(newVal){
            if(newVal){
                this.disabled = false
            }else{
                this.disabled = true
            }
        }
    }
}
</script>

<style lang="less" scoped>
.input_icon{
    margin-right: 5px;
    img{
        width: 17px;
    }
}
.submit /deep/ .van-button{
    height: 35px!important;
}
.submit{
    margin: 10px 0;
}
.submit /deep/ .van-button--info{
    background-color: #0099ff;
    border-bottom-color: #0099ff;
}


.register_bottom{
    // position: fixed;
    // bottom: 30px;
    // left: 50%;
    position: relative;
    top: 80px;
    transform: scale(0.8);
    transform-origin: left;
    span{
        color: #0099ff;
    }
}
@media screen and (max-width: 350px){
    .register_bottom{
        transform: translateX(-50%) scale(0.7);
    }
}
.register_bottom /deep/ .van-checkbox{
    overflow: initial;
}
.register_bottom /deep/ .van-checkbox__label{
    font-size: 10px;
    color: #2a2b2d;
}
.register_bottom /deep/ .van-checkbox__label{
    white-space: nowrap;
}

.input_choose{
    width: 50px!important;
}
.input_choose /deep/ .van-cell{
    padding: 0!important;
}

.sms /deep/ .van-button--info{
    color: #0099ff;
    border-color: #0099ff;
}
</style>